<template>
  <div>
    <el-row>
      <el-col :span="1" style="margin: 0px 0px 0px 10% ">
        <img src="../img/buy.png" width="40" height="40">
      </el-col>
      <h2 style="font-size: 30px;margin: 0px 0px">确认订单</h2>
    </el-row>
    <el-divider></el-divider>
    <el-row style="margin: 20px 0px 0px 180px;">
      <el-col :span="21" >
        <el-card>
          <p>收货地址</p>
          <el-card>
            <el-table ref="multipleTable" :data="users" tooltip-effect="dark" style="width: 100%" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
              <el-table-column prop="username" label="收货人" >
              </el-table-column>
              <el-table-column prop="phone" label="手机号">
              </el-table-column>
              <el-table-column prop="useraddress" label="地址" >
              </el-table-column>
              <el-table-column label="操作" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-button type="primary" plain @click="edit(scope.row.id)">修改</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <p>商品详情</p>
          <el-row>
            <el-col :span="24" v-for="item in this.$store.state.selectgoods" :key ="item.id" class="card" :model="searchForm">
              <el-row>
                <el-col :span="1" >
                  <img  height="40px" :src="item.imghref" class="image">
                </el-col>
                <el-col :span="10" style="margin-left: 20px">
                  <span>{{item.goodname}}</span>
                </el-col>
                <el-col :span="1" :offset="6">
                  <span>{{item.price}}元x{{item.count}}</span>
                </el-col>
                <el-col :span="1" :offset="3">
                  <span style="color: red">{{item.subtotal}}元</span>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="2">
              <p>配送方式</p>
            </el-col>
            <el-col :span="1" style="margin-top: 2px;margin-left: 100px">
              <p style="font-size: 15px;color: red">包邮</p>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="2">
              <p>发票</p>
            </el-col>
            <el-col :span="2" style="margin-top: 2px;margin-left: 100px">
              <p style="font-size: 15px;color: red">电子发票</p>
            </el-col>
            <el-col :span="2" style="margin-top: 2px;margin-left: 30px">
              <p style="font-size: 15px;color: red">个人</p>
            </el-col>
            <el-col :span="2" style="margin-top: 2px;margin-left: 10px">
              <p style="font-size: 15px;color: red">商品明细</p>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="24" :offset="19">
              <el-row>
                <el-col :span="2">
                  <p>商品件数:</p>
                </el-col>
                <el-col :span="2" style="margin-left: 125px">
                  <p style="color: red"> {{this.$store.state.count}}件</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="24" :offset="19">
              <el-row>
                <el-col :span="2">
                  <p>商品总价:</p>
                </el-col>
                <el-col :span="2" :offset="2">
                  <p style="color: red"> {{this.$store.state.total}}元</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="24" :offset="19">
              <el-row>
                <el-col :span="2">
                  <p>运费:</p>
                </el-col>
                <el-col :span="2" style="margin-left: 125px">
                  <p style="color: red"> 0元</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="24" :offset="19">
              <el-row>
                <el-col :span="2">
                  <p>您需要支付:</p>
                </el-col>
                <el-col :span="1" style="margin: -25px 0px 0px 80px">
                  <p style="color: red;font-size: 30px"> {{this.$store.state.total}}</p>
                </el-col>
                <el-col :span="1">
                  <p style="color: red">元</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="2" :offset="19">
              <el-button type="danger" style="width:250px" @click="buyall">结算</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import allBuyApi from "@/http/allBuyApi";

export default {
  name: "AllBuy",
  data(){
    return{
      users:[],
    }
  },
  created() {
    this.getList()
  },
  methods:{
    getList(){
      allBuyApi.getListByPage().then(res =>{
        console.log(res);
        if (res.data.code == 200){
          this.users = res.data.data.data
          console.log(this.users);
        }
      })
    },
    edit(id) {
      console.log(id);
      this.$router.push(`/allBuy/editInfo/${id}.html`)
    },
    buyall(){
      allBuyApi.insert(this.$store.state.ids).then(res => {
        if (res.data.code == 200){
          this.getList();
        }
      });
      allBuyApi.delBatch(this.$store.state.ids).then(res => {
        if (res.data.code == 200){
          this.getList();
        }
      })
      this.$router.replace("/order.html");
    }
  }
}
</script>

<style>

</style>